
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Js编码4</title>
	<style>
	.box-show{
		width: 600px;
		height: 50px;
		border: 1px solid #000;
		margin:10px auto;

	}
	.box-show>.number{
		float: left;
		height: 50px;
		width: 50px;
		text-align: center;
		line-height: 50px;
		background-color: red;
		color:white;
		margin: 0 10px;
		transition: transform 1s;
	}
	.number.left{
		transform: translateX(-1000px);
	}
	.number.right{
		transform: translateX(1000px);
	}	
	</style>
</head>
<body>
	<div class="box-in">
		<input type="text">
		<input type="button" value="左侧入">
		<input type="button" value="右侧入">
		<input type="button" value="左侧出">
		<input type="button" value="右侧出">
	</div>
	<div class="box-show">

	</div>
</body>
<script>
//获取4个按钮和输入框,展示框
	var leftIn = document.querySelector('input[value=左侧入]')
	var rightIn = document.querySelector('input[value=右侧入]')
	var leftOut = document.querySelector('input[value=左侧出]')
	var rightOut = document.querySelector('input[value=右侧出]')
	var putIn = document.querySelector('input[type=text]')
	var showBox = document.querySelector('.box-show');


//左侧入
	leftIn.onclick = function(){
		if(isNum()){
			var numBox = document.createElement('div');
			numBox.classList.add('number','left');
			numBox.innerHTML = putIn.value;
			showBox.insertBefore(numBox,showBox.firstChild);
			setTimeout(function(){
				numBox.classList.remove('left');
			},200)
			disappear()
		}else{
			alert('请输入数字')
			putIn.value=''
		}


	}

//右侧入
	rightIn.onclick = function(){
		if(isNum()){
			var numBox = document.createElement('div');
			numBox.classList.add('number','right');
			numBox.innerHTML = putIn.value;
			showBox.appendChild(numBox);
			setTimeout(function(){
				numBox.classList.remove('right');
			},200)
			disappear()
		}else{
			alert('请输入数字')
			putIn.value=''
		}


	}
//左侧出
	leftOut.onclick = function(){
		var first = showBox.firstChild;
		alert('将被删除的数字是'+first.innerHTML);
		first.parentNode.removeChild(first);


	}
//右侧出
	rightOut.onclick = function(){
		var last =showBox.lastChild;
		alert('将被删除的数字是'+last.innerHTML);
		last.parentNode.removeChild(last);


	}

//点击方块消失
function disappear(){
		var numbers = document.querySelectorAll('.number')
	for(var i=0;i<numbers.length;i++){
		numbers[i].onclick = function(){
			showBox.removeChild(this)
		}
	}
}




//检测输入
	function isNum(){
		var num = putIn.value;
		if(!isNaN(num)){
			return true
		}else{
			return false
		}
	}
</script>
</html>
<!-- 重要说明
百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目的
学习与实践JavaScript的基本语法、语言特性
初步了解JavaScript的事件是什么
初步了解JavaScript中的DOM是什么
任务描述
如图，模拟一个队列，队列的每个元素是一个数字，初始队列为空
有一个input输入框，以及4个操作按钮

点击"左侧入"，将input中输入的数字从左侧插入队列中；
点击"右侧入"，将input中输入的数字从右侧插入队列中；
点击"左侧出"，读取并删除队列左侧第一个元素，并弹窗显示元素中数值；
点击"右侧出"，读取并删除队列又侧第一个元素，并弹窗显示元素中数值；
点击队列中任何一个元素，则该元素会被从队列中删除
任务注意事项
实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
请注意代码风格的整齐、优雅
代码中含有必要的注释
示例图仅为参考，不需要完全一致
需要考虑数字输入的合法性
建议不使用任何第三方库、框架 -->